<template>
  <div class="comment">
    <!--van-list：实现瀑布加载效果-->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in commentList" :key="item.com_id.toString()">
        <!-- 作者头像
        slot="icon" 是cell单元格命名插槽，自定义左侧按钮
        -->

        <div slot="icon">
          <img class="avatar" :src="item.aut_photo" alt />
        </div>
        <!-- 作者名称 -->
        <div slot="title">
          <span>{{item.aut_name}}</span>
        </div>
        <!-- 点赞 -->
        <div slot="default">
          <van-button
            icon="like-o"
            size="mini"
            plain
            :type="item.is_liking?'danger':'default'"
          >&nbsp;{{item.like_count}}</van-button>
        </div>
        <!-- 评论内容和时间 -->
        <div slot="label">
          <p>{{item.content}}</p>
          <p>
            <span>{{item.pubdate | formatTime}}</span>
            ·
            <span
              @click="openReply(item.com_id.toString())"
            >{{item.reply_count}}&nbsp;回复</span>
          </p>
        </div>
      </van-cell>
    </van-list>
    <!-- 回复列表展示-弹出层/瀑布 -->
    <van-popup v-model="showReply" position="bottom" :style="{ height: '80%' }" round>
      <!-- 瀑布加载效果 -->
      <van-list
        v-model="reply.loading"
        :finished="reply.finished"
        finished-text="没有更多了"
        @load="onLoadReply"
      >
        <van-cell v-for="item in replyList" :key="item.com_id.toString()">
          <!-- 作者头像 -->
          <div slot="icon">
            <img class="avatar" :src="item.aut_photo" alt />
          </div>
          <!-- 作者名称 -->
          <div slot="title">
            <span>{{item.aut_name}}</span>
          </div>
          <!-- 评论内容和时间 -->
          <div slot="label">
            <p>{{item.content}}</p>
            <p>
              <span>{{item.pubdate | formatTime}}</span>
            </p>
          </div>
        </van-cell>
      </van-list>
    </van-popup>
    <!-- 添加评论或回复的表单 -->
    <div class="reply-container van-hairline--top">
      <van-field v-model="contentCorR" placeholder="写评论或回复...">
        <!-- van-loading设置加载图标，与提交进行配置使用 -->
        <!-- slot="button"命名插槽，表明要给van-field的指定位置填充内容(右侧) -->
        <van-loading v-if="submitting" slot="button" type="spinner" size="16px"></van-loading>
        <span class="submit" v-else slot="button" @click="add">提交</span>
      </van-field>
    </div>
  </div>
</template>

<script>
// 获取评论回复【api】
import { apiReplyList, apiAddCorR } from '@/api/reply.js'
// 获取文章评论api
import { apiCommentList } from '@/api/comment.js'
export default {
  name: 'com-comment',
  data () {
    return {
      // 添加评论或回复成员
      contentCorR: '', // 评论或回复的内容
      submitting: false, // 是否正在提交
      // 回复相关
      lastID: null, // 分页标志(null、前一次返回的last_id)
      replyList: [], // 回复列表
      commentID: '', // 被单击查看的目标评论id

      showReply: false, // 回复弹出层是否展示
      // 回复瀑布相关
      reply: {
        list: [],
        loading: false,
        finished: false
      },
      // 评论相关
      commentList: [], // 评论列表
      offset: null, // 评论分页标志
      // 评论瀑布相关成员
      list: [], // demo数据
      loading: false, // 瀑布动画控制
      finished: false // 瀑布停止控制
    }
  },
  methods: {
    // 添加 评论 或 回复
    // 判断弹出层--showReply：true回复    false评论
    async add () {
      // 空的数据不予处理
      if (!this.contentCorR) { return false }
      // 按钮处于加载状态
      // 注意不要放在延迟期下边
      this.submitting = true
      // 延迟期
      await this.$sleep(800)
      if (this.showReply) {
        // 添加回复
        const result = await apiAddCorR({
          target: this.commentID,
          content: this.contentCorR,
          artID: this.$route.params.aid
        })
        // 把添加好的回复信息，追加到回复列表里边，replyList，unshift头部追加
        this.replyList.unshift(result.new_obj)
        // 获得当前评论的下标信息
        // findIndex（）遍历数组，根据条件找到某个元素的下标
        const index = this.commentList.findIndex(item =>{
          // item:代表每个数组元素
          // 条件是：item.com_id.toString() === this.commentID
          return item.com_id.toString() === this.commentID
        })
        // 通过index找到目标评论，对reply_count做累加
        this.commentList[index].reply_count++
      } else {
        // 添加评论
        const result = await apiAddCorR({
          target: this.$route.params.aid,
          content: this.contentCorR
        })
        // 新添加的评论的完成记录，会被服务器返回回来，引用的名称为new_obj
        // 现在要把新添加的放到页面上显示，就是给评论列表做追加unshift
        this.commentList.unshift(result.new_obj)
      }
      // 清除添加的表单域信息
      this.contentCorR = ''
      this.submitting = false
    },
    // 开启 回复弹出层 逻辑
    openReply (comID) {
      this.showReply = true // 展开回复弹出层
      this.commentID = comID // 收集目标评论id
      // 给回复弹出层和瀑布 做初始化
      this.reply.finished = false
      this.lastID = null
      this.replyList = []
    },
    // 回复瀑布加载
    async onLoadReply () {
      // 延迟期
      await this.$sleep(800)
      // 获得回复列表数据
      const replys = await apiReplyList({
        commentID: this.commentID,
        lastID: this.lastID
      })
      // 瀑布加载动画消失
      this.reply.loading = false
      // 判断是否有数据
      if (!replys.results.length) {
        // 没有 瀑布停止
        this.reply.finished = true
        return false
      }

      // 有数据，追加
      this.replyList.push(...replys.results)
      // 接收分页标志的last_id信息
      this.lastID = replys.last_id

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.reply.list.push(this.reply.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.reply.loading = false

      //   // 数据全部加载完成
      //   if (this.reply.list.length >= 40) {
      //     this.reply.finished = true
      //   }
      // }, 1000)
    },
    // 评论瀑布相关函数
    async onLoad () {
      await this.$sleep(800)
      // 根据文章id获取评论列表
      const comments = await apiCommentList({
        articleID: this.$route.params.aid,
        offset: this.offset
      })
      // 瀑布动画消失
      this.loading = false
      // 判断是否获得到评论列表
      if (!comments.results.length) {
        // 没有数据瀑布停止
        this.finished = true
        return false // 停止后续代码执行
      }

      // 有数据，追加到commentList成员里边
      this.commentList.push(...comments.results)
      // 对分页标志offset进行赋值
      this.offset = comments.last_id

      // 异步更新数据

      // setTimeout(() => {
      //   for (let i = 0; i < 5; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 10) {
      //     this.finished = true
      //   }
      // }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.comment {
  margin-top: 15px;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-right: 10px;
  }
  /deep/ .van-cell__title {
    .van-cell__label {
      width: 400px;
    }
  }
  // 添加评论或回复构件
  .reply-container {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 88px;
    width: 100%;
    background: #f5f5f5;
    z-index: 9999;
    .submit {
      font-size: 24px;
      color: #3296fa;
    }
  }
}
</style>
